<!--
 * @Description:
 * @version:
 * @Author: 尹鹏孝
 * @Date: 2022-12-19 09:27:15
 * @LastEditors: 尹鹏孝
 * @LastEditTime: 2022-12-20 16:24:36
-->
<template>
  <div class="ts" >
    <span  @click="tCountPlus($event)">{{ typescript.man }}</span>
    {{typescript.man}}
    <div :class="[activeClass,acp]">fff</div>
    <div :class="[p?K:'']" >PK</div>
    <div>
        {{ aBook }}
    </div>
    <AboutViewVue class="kfc" ref="kfc"></AboutViewVue>
    <div  :style="{ fontSize: postFontSize + 'px' }">

     <list class="kfc" v-bind="{title:'1-vM',name:'2',likes:1111}" @enlarge-text="postFontSize += 0.1" @lower-text="postFontSize -= 0.1" @set-color="setColor"></list>
    </div>
    <ul>
        <li v-for="(me,index) in items" :key="index">{{ me.message }}</li>
    </ul>
     <ul>
        <li v-for="(me,index) in lists" :key="index">{{ me.content }}</li>
    </ul>
    <form>
        <a-input v-model:value="typescript.man"/>
        <a-textarea v-model:value="typescript.man" ref="textarea" />

  <KeepAlive>

<a-checkbox
        v-model:value="toggle"
        true-value="yes"
        false-value="no" />
  </KeepAlive>
  <a-input  v-model:value="question"/>
  <a-textarea v-model:value="answer"/>
   <a-input  ref="input" />
    </form>
    <FancyButton>
       <span style="color:red">Click me!</span>
        <template #header="scope">
            <p>Here's some contact info{{ scope }}</p>
        </template>
</FancyButton>
<AdminPage/>

<a-btn/>
Mouse position is at: {{ x }}, {{ y }}
</div>
 <a-button v-debounce="{fn: handleClick, event: 'click', delay: 200}">点击试试</a-button>
 <a-input  v-throttle="{fn: handleInput, event: 'input', delay: 1000}" v-model:value="obj.hello" />
{{ $translate('greetings.hello') }}
<a-button @click="show = !show">Toggle</a-button>
<Transition name="fade" mode="out-in">
  <p v-if="show">hello</p>
</Transition>
<a-button @click="login" type="primary">登录</a-button>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted, watch, watchEffect, inject,provide ,readonly,defineAsyncComponent } from 'vue'
import AboutViewVue from '@/views/AboutView.vue';
import List from '@/components/list.vue';
import FancyButton from '@/components/FancyButton.vue'
import { myInjectionKey } from '@/keys/index'
import { useMouse } from '@/utils/mouse'
import { StaffBasic} from '@/api/index'
const { x, y } = useMouse()
const typescript = reactive({ man: 0 })
const activeClass = ref('active')
const acp = ref('acp')
const p = ref(1)
const K = ref('1')
const aBook = computed(()=>{
    return typescript.man?'yyds':'nndx'
})
const postFontSize = ref(14)
const items = ref([{
    message:'Foo'
},{
    message:'Bor'
    }])
const input = ref(null)
onMounted(() => {
    typescript.man = 123
    console.log(input.value)
    // input.value.focus()
})
const tCountPlus = (event:Event) => {
    console.log(event.target)
    typescript.man++
     if (event) {
        event.preventDefault()
    }
    // alert(typescript.man)

}
const toggle = (value:boolean) => {
    console.log(value)
    return true
}
const question = ref('888888888888');
const answer = ref('Questions usually contain a question mark. ;-)')
// 可以直接侦听一个 ref
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.indexOf('?') > -1) {
    answer.value = 'Thinking...'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = (await res.json()).answer
    } catch (error) {
      answer.value = 'Error! Could not reach the API. ' + error
    }
  }
})
// watch(() => typescript.man, (man) => { console.log('log:', man) }, { deep: true })

// const url = ref('https://yesno.wtf/api')
// const asyncFN = async () => {
//     let con = await fetch(url.value)
//     typescript.man = Number.isNaN(con.json())?0:Math.random();
// }
// asyncFN()
// watch(url, asyncFN)
const url = ref('https://yesno.wtf/api')
const data = ref(null)
watchEffect(async () => {
  const response = await fetch(url.value)
    data.value = await response.json()
  console.log(data?.value?.answer??null)
})

// watchEffect()
const textarea = ref(null)
watchEffect(() => {
  if (textarea.value) {
    textarea.value.focus()
  } else {
    // 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制）
  }
})

const kfc = ref(null)
watchEffect(() => {
    if (kfc.value) {
        console.log(kfc.value.b)
        console.log(kfc.value.a)
    }
})

const setColor = (c:number,b:number) => {
    console.log(c)
    console.log(b++)
}
const money = ref<number>(10)
const moneyT = ref(10)

interface Todo{
    id: number
    content: string
    done:boolean
}
const lists = ref<Todo[]>([])
lists.value.push({
    id: 1,
    content: 'script',
    done:true
})
lists.value.push({
    id: 2,
    content: 'script-new',
    done:true
})

provide('message', {
    name:'hello!'
})
const location = ref('llll-location');
const updateLocation = () => {
    location.value = 'South Pole'
}
    updateLocation
provide('location', readonly({
    location,
    updateLocation
}))

provide(myInjectionKey, {
    data:11111
})

const AdminPage = defineAsyncComponent(
     {
        // 加载函数
  loader:()=> import('@/components/AdminPageComponent.vue'),

  // 加载异步组件时使用的组件
//   loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
//   errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
    }
)
const handleClick = () => {
  console.log('防抖点击');
}

const obj = reactive({
  hello: '',
  world: ''
})
const handleInput = () => {
  console.log('节流输入框的值：', obj.hello);
}
const show = ref(false)

const login = async () => {
  let res = await StaffBasic({id:111})
 console.log(res)
}
</script>

<style>
.active{
    color:red
}
.acp{
    background: #ddd;
}
</style>